<!-- 招聘信息模块 -->
<template>
	<div>
		<!-- 卡片+按钮-->
		<el-card class="box-card" shadow="always">
		  
		  <!-- 表格 @selection-change="handleSelectionChange" 多选选项变化时触发 -->
		  <div class="text item">
		    <el-table ref="multipleTable" :data="tableData"
		    tooltip-effect="dark" style="width: 100%" :border="false"
		      max-height="400">
			  
			  <el-table-column type="expand">
				<template slot-scope="scope">
				  <el-form label-position="left" inline class="demo-table-expand" style="font-size:30px; font-family: '楷体';">
					<el-form-item label="招聘要求">
					  <span>{{ scope.row.campusRecruitment }}</span>
					</el-form-item>
				  </el-form>
				</template>
			  </el-table-column>
			  
			  <el-table-column label="发布时间" width="200">
			    <template slot-scope="scope">
				  <i class="el-icon-time"></i>
			      <span v-text="dateFormat(scope.row.pubdate)"></span>
			    </template>
			  </el-table-column>

		
		      <el-table-column prop="name" label="招聘部门" show-overflow-tooltip>
		
		      </el-table-column>
			  
			  <el-table-column prop="campusRecruitment" label="招聘需求" show-overflow-tooltip>
			  		
			  </el-table-column>
			  
			  <el-table-column prop="edaBg" label="学历背景" width="120">
			  		
			  </el-table-column>
			  
			  <el-table-column prop="nums" label="需求人数" width="120">
			  		
			  </el-table-column>
		
		      
		      <el-table-column label="操作" width="100">
		        <!-- 插槽,用来处理表格单元格中的数据 -->
		        <template slot-scope="scope">
		          <el-button size="mini" @click="applicantJob(scope.row)">申请职位</el-button>
		        </template>
		      </el-table-column>
		    </el-table>
		
		    <!-- 分页组件-->
		    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
		      :page-sizes="[4, 8, 16,32]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
		      :total="queryInfo.total">
		    </el-pagination>	
		  </div>
		</el-card>
		
		<el-dialog
		  title="申请职位"
		  :visible.sync="dialogVisible"
		  width="40%"
		  :before-close="handleClose">
		  
		  <el-form  ref="form" :model="form" label-width="120px" :rules="rules">
		  
		    <el-form-item label="投递部门" prop="deptName">
		  	<el-input v-model="form.deptName" :disabled="true" style="width: 60%;"></el-input>
		    </el-form-item>
		  
		    <el-form-item label="个人邮箱" prop="Email">
		    	<el-input v-model="form.Email" clearable style="width: 60%;"></el-input>
		    </el-form-item>
		    
		    <el-form-item label="联系方式" prop="phone">
		    	<el-input v-model="form.phone" clearable style="width: 60%;"></el-input>
		    </el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="sendRecruit()">投递</el-button>
				<el-button @click="reset()">重 置</el-button>
			</el-form-item>
		  </el-form>
		</el-dialog>
		
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	      tableData: [],
	      queryInfo: {
	        pageNum: 1,
	        pageSize: 4,
	        total: 0,
	      },
		  dialogVisible:false,
		  loading: false,
		  form:{
			  deptName:'',
			  Email:'',
			  phone:''
		  },
		  rules: {
		  	Email: [
		  		{required: true,message: '请输入邮箱',trigger: 'blur'},
		  		{min: 8,max: 40,message: '长度在 1 到 40 个字符',trigger: 'blur'}
		  	],
		  	phone: [
		  		{required: true,message: '请输入电话',trigger: 'blur'},
		  		{min: 11,max: 11,message: '长度为11个字符',trigger: 'blur'}
		  	]
		  },
	    }
	  },
	  methods:{
	  	dateFormat(time) { //时间格式转换
	  	  var date = new Date(time);
	  	  var year = date.getFullYear();
	  	  /* 在日期格式中，月份是从0开始的，因此要加0
	  	   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
	  	   * */
	  	  var month =
	  	    date.getMonth() + 1 < 10 ?
	  	    "0" + (date.getMonth() + 1) :
	  	    date.getMonth() + 1;
	  	  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
	  	
	  	  var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
	  	  var minute = date.getMinutes() < 10 ? "0" +  date.getMinutes() :  date.getMinutes();
	  	  var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	  	  // 拼接
	  	  return (
	  	    year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
	  	  );
	  	},
		//关闭页面前的回调
		handleClose(done) {
		  if (this.loading) {
		    return;
		  }
		  this.$confirm('确定关闭将不会保存数据？')
		    .then(() => {
		      this.loading = true;
		      this.timer = setTimeout(() => {
		        done();
		        this.loading = false;
		      }, 100);
		      this.reset();
		    })
		    .catch(() => {});
		},
		getRecruit(){
			const that = this
			this.$http.post("/recruitMeg/getRecruit", this.queryInfo).then(function(res) {
			  that.tableData = res.data.recruits
			  that.queryInfo.total = res.data.total
			})
		},
		applicantJob(row){
			var that = this
			var token = window.sessionStorage.getItem("token");
			if(token==null){
				that.$confirm('请登录后申请职位?是否跳转!', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  that.$router.push("/login")
				}).catch(() => {
				  that.$message({
					type: 'info',
					message: '已取消跳转'
				  });          
				});
			}else{
				that.dialogVisible = true;
				that.form.deptName = row.name;
			}
		},
		//重新选择页数大小时触发
		handleSizeChange(val) {
		  this.queryInfo.pageSize = val;
		  this.getRecruit();
		},
		//重新选择页数
		handleCurrentChange(val) {
		  this.queryInfo.pageNum = val;
		  this.getRecruit()
		},
		//关闭会话前重置表单
		reset() {
		  this.$refs.form.resetFields();
		},
		sendRecruit(){
			this.$refs.form.validate((valid) => {
				if(valid){
					var that = this
					var deptName = this.form.deptName;
					this.$http.post("/recruitMeg/sendRecruit/"+deptName).then(function(res) {
						if (res.data.code == 200) {
						  that.$message({
						    showClose: true,
						    message: "投递成功",
						    type: 'success'
						  });
						  that.dialogVisible = false;
						}else if(res.data.code==201){
							that.$message({
							  showClose: true,
							  message:"您已投递,请勿重复投递!!",
							  type: 'error'
							});
							that.dialogVisible = false;
						}else {
						  that.$message({
						    showClose: true,
						    message:"保存失败",
						    type: 'error'
						  });
						}				  
					})
				}else {
					return false;
				}
			})
			
		}
	  },
	  created() {
	  	this.getRecruit();
	  }
	}
	
</script>

<style>
	.box-card {
	  width: auto;
	  height: 550px;
	}
	
	.text {
	  font-size: 14px;
	}
</style>
